<!--
 * @Author: 1243sd 782012816@qq.com
 * @Date: 2024-03-19 22:31:01
 * @LastEditors: 1243sd 782012816@qq.com
 * @LastEditTime: 2024-03-20 00:00:09
 * @FilePath: \frontend-ykt-admin\src\views\setting\productDetail.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="container">
    <b-card-new detail title="商品信息">
        <el-form ref="editPara" label-width="110px" :model="editPara" :rules="rules">
            <el-form-item label="商品名称:" prop="name">
                <el-input v-model="editPara.name" placeholder="请输入商品名称" class="w360"></el-input>
            </el-form-item>
            <el-form-item label="商品图片:" prop="head_img">
                <b-img-upload
                    v-model="editPara.head_img"
                    @input="(e) => handleImgUploaded(e, 'head_img')"
                ></b-img-upload>
                <div class="fication">建议尺寸750px X 420px, 允许上传png、jpg </div>
            </el-form-item>
            <el-form-item label="是否显示在H5:">
                <el-switch v-model="editPara.is_index_show" :inactive-value="0" :active-value="1"></el-switch>
            </el-form-item>
            <el-form-item label="商品简介:">
                <el-input type="textarea" rows="5" v-model="editPara.summary" placeholder="请输入商品简介" class="w360" maxlength="300"></el-input>
            </el-form-item>
            <el-form-item label="分期金额:" prop="instalment_amt">
                <el-input oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')" v-model="editPara.instalment_amt" placeholder="请输入分期金额" class="w360"></el-input>
            </el-form-item>
            <el-form-item label="分期数量:" prop="instalment_no">
                <el-input oninput="value=isNaN(parseInt(value.match(/^[0-9]+$/)))?'':parseInt(value.match(/^[0-9]+$/))" v-model="editPara.instalment_no" placeholder="请输入分期数量" class="w360"></el-input>
            </el-form-item>
            <el-form-item label="商品详情:" prop="detail">
                <!-- <div style="width: 800px;"> -->
                    <BEditor
                        class="b-editor"
                        height="400"
                        placeholder="请输入商品详情"
                        :value="editPara.detail"
                        @change="(e) => handleEditorChange(e, 'detail')"
                    ></BEditor>
                <!-- </div> -->
            </el-form-item>
        </el-form>
        <div slot="btn-wrapper">
            <b-button-new text="取消" @click="handleBack"></b-button-new>
            <b-button-new text="保存" @click="handleSave"></b-button-new>
        </div>
    </b-card-new>
  </div>
</template>
<script>
const initEditPara = () => ({
    head_img: '', // 商品图片
    name: '', // 商品名称
    summary: '', // 商品简介
    detail: '', // 商品详情
    is_index_show: '', // 是否首页展示
    instalment_amt: '', // 分期金额;特指分期后每期需要还款的金额
    instalment_no: '', // 分期数量;例如:12
})
export default {
  data () {
    return{
        showType: '',  // 0 新增  1 编辑
        editPara: initEditPara(),
        
        rules: {
            name: [{ required: true, message: '请输入商品名称', trigger: ['blur', 'change'] }],
            summary: [{ required: true, message: '请输入商品简介', trigger: ['blur', 'change'] }],
            head_img: [{ required: true, message: '请输入产品首图', trigger: ['blur', 'change'] }],
            instalment_amt: [{ required: true, message: '请输入分期金额', trigger: ['blur', 'change'] }],
            instalment_no: [{ required: true, message: '请输入分期数量', trigger: ['blur', 'change'] }],
            detail: [{ required: true, message: '请输入产品详情', trigger: ['blur', 'change'] }],
        },
    }
  },
  created() {
    const { id, showType } = this.$route.query
    this.showType = parseInt(showType)
    if (id) {
        this.getDetail(id)
    }
  },
  mounted () {
    
  },
  methods: {
    // 获取详情
    getDetail(id) {
        this.$api.setting.product_detail(id).then(res => {
            this.editPara = res || {}
        })
    },
    // 上传图片成功
    handleImgUploaded(url) {
        this.editPara.head_img = url || "";
    },
    // 改变商品详情
    handleEditorChange(e, name) {
      this.editPara[name] = e;
    },
    // 取消返回
    handleBack() {
        this.$router.go(-1)
    },
    // 保存
    handleSave() {
        this.$refs.editPara.validate((valid) => {
            if (valid) {
                if (this.showType) { // 编辑
                    this.$api.setting.product_edit(this.editPara.id, this.editPara).then(res => {
                        this.$message.success('编辑成功')
                        this.handleBack()
                    })
                } else { // 新增
                    this.$api.setting.product_add(this.editPara).then(res => {
                        this.$message.success('新增成功')
                        this.handleBack()
                    })
                }
            }
        })
    }
  },
  computed() {
    
  }
}
</script>
<style scoped>

</style>
